<template>
  <div>
    <!-- 顶部输入框区域 -->
    <div class="header">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-row type="flex" justify="space-between">
          <el-form label-width="70px" :inline="true">

            <el-col :span="15">
              <el-col>
                <el-form-item label="车辆拍照">
                  <el-input v-model="queryData.license_plate" placeholder="请输入车辆拍照" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="小区名称">
                  <el-select v-model="queryData.community_code" @change="changeValue" placeholder="请输入小区名称" clearable
                    filterable>
                    <el-option v-for="item in allCommunityList" :key="item.id" :value="item.code" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="栋数">
                  <el-select v-model="queryData.building_code" placeholder="请输入栋数" clearable filterable>
                    <el-option v-for="item in buildingList" :key="item.id" :value="item.code" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="添加时间">
                  <el-date-picker v-model="create_time" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" />
                </el-form-item>
              </el-col>
            </el-col>

            <el-col :span="6">
              <el-col>
                <el-form-item>
                  <el-button type="primary" @click="onSearch">查询</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-form-item>
              </el-col>
            </el-col>
          </el-form>
        </el-row>

      </el-card>
    </div>

    <!-- 表格内容区域 -->
    <div class="content">

      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- 按钮区域 -->
        <el-row justify="end">
          <div>
            <el-button type="primary" @click="addRef.isShow = true">新增车辆</el-button>
            <RefreshRight style="width: 1em; height: 1em; margin-right: 8px; margin-left: 8px;" />
            <Share style="width: 1em; height: 1em; margin-right: 8px" />
            <Tools style="width: 1em; height: 1em; margin-right: 8px" />
          </div>
          <div></div>
        </el-row>
        <br>

        <!-- 表格区域 -->
        <el-table :data="list" stripe>
          <el-table-column label="车辆牌照" prop="license_plate">
          </el-table-column>
          <el-table-column label="车辆名称" prop="name">
          </el-table-column>
          <el-table-column label="照片" prop="photo">
            <template #default="{ row }">
              <ImagePreview :src="row.photo" :width="100" :height="100" />
            </template>
          </el-table-column>
          <el-table-column label="车辆颜色" prop="color">
          </el-table-column>
          <el-table-column label="小区名称" prop="community_code">
            <template #default="{ row }">
              {{ row.community?.name }}
            </template>
          </el-table-column>
          <el-table-column label="栋数" prop="building_code" width="70">
            <template #default="{ row }">
              {{ row.building?.name }}
            </template>
          </el-table-column>
          <el-table-column label="车主姓名" prop="member_id">
            <template #default="{ row }">
              {{ row.member?.name }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式" prop="member_id">
            <template #default="{ row }">
              {{ row.member?.tel }}
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="">
            -
          </el-table-column>
          <el-table-column label="添加时间" width="200" prop="create_time">
            <template #default="{ row }">
              {{ formatDate(row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button type="text" @click="editRow(row.id)">编辑</el-button>
              <el-button type="text" @click="delRow(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>

        <!-- 分页区域 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
          :page-sizes="[2, 5, 8, 10]" v-model:page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>

      <!-- 抽屉区域 -->
      <addForm ref="addRef" @updateList="initData" />

    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getVehicleListApi, delCarInfoApi } from '@/api/vehicle.js'
// import ImagePreview from '@/components/ImagePreview/index.vue'
import addForm from './component/addForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getBuildingApi } from '@/api/community.js'
import { useAllCommunityList, useBuildingList, useHouseList } from '@/hooks/index.js'
import { formatDate } from '@/utils/index.js'

// ===================================================

// 查询参数
const defaultData = () => ({
  current: 1,
  pageSize: 2,
  license_plate: "",
  community_code: "",
  building_code: "",
  create_time: ""
})

const queryData = reactive(defaultData())

// 表格数据
const list = ref([])
// 总数
const total = ref()

const addRef = ref()

// 日期时间
const create_time = ref([])

const allCommunityList = useAllCommunityList()

const buildingList = ref([])

// ===================================================

// 获取车辆管理数据列表
const initData = async () => {
  let res = await getVehicleListApi(queryData)
  console.log(res);

  // res.data.rows = res.data.rows.map(item => {
  //   item.photo = 'http://124.223.14.236:8881' + item.photo
  //   return item
  // })

  // 赋值数据
  list.value = res.data.rows
  total.value = res.data.count
};

// 查询
const onSearch = () => {
  queryData.current = 1
  initData()
}

// 重置表单
const resetForm = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 2,
    license_plate: "",
    community_code: "",
    building_code: "",
    create_time: ""
  })

  initData()
}

// 每页数量切换事件
const sizeChange = (val) => {
  // console.log('每页是', val);
  queryData.pageSize = val
  initData()
}

// 页码切换事件
const currentChange = (val) => {
  // console.log('页码是', val);
  queryData.current = val
  initData()
}

// 删除事件
const delRow = async (id) => {
  // console.log(id);
  try {
    // 删除确认框
    await ElMessageBox.confirm(
      '确定删除么?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })

    // 发起网络请求
    await delCarInfoApi(id)

    // 边缘处理
    if (queryData.pageSize === 1 && list.value.length === 1) queryData.current--

    // 更新列表
    initData()
  } catch (error) {
    console.log(error);
  }
}

// 编辑事件
const editRow = (id) => {
  // console.log(id);
  addRef.value.replyData(id)
}

// 下拉框change事件
const changeValue = async (val) => {
  queryData.building_code = null
  let res = await getBuildingApi(val)
  // console.log(res);
  buildingList.value = res.data
}

onMounted(() => {
  initData()
})

</script>

<style scoped>
.header {
  margin: 40px;
}

.content {
  margin: 40px;
}
</style>
